<template>
  <div class="app-container">
    <!--    图表-->
    <el-row :gutter="20" style="margin-bottom: 10px">
      <!--      属性告警统计-->
      <el-col :span="8" :xs="24">
        <div class="container">
          <div class="title">属性告警统计</div>
          <!--          内容-->
          <el-row :gutter="7" class="content">
            <el-col :span="8" v-for="(item, i) in deviceCount" :key="i">
              <div class="text">
                <div class="text_name">
                  <div>{{ item.name }}</div>
                  <div>{{ item.ratio }}%</div>
                </div>
                <div class="text_num">{{ item.value }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!--      传感器告警统计-->
      <el-col :span="8" :xs="24">
        <div class="container">
          <div class="title">传感器告警统计</div>
          <!--          内容-->
          <el-row :gutter="7" class="content">
            <el-col :span="8" v-for="(item, i) in sensorCount" :key="i">
              <div class="text">
                <div class="text_name">{{ item.name }}</div>
                <div class="text_num">{{ item.value }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!--      传感器类型告警统计-->
      <el-col :span="8" :xs="24">
        <div class="container">
          <div class="title">传感器类型告警统计</div>
          <!--          内容-->
          <el-row :gutter="7" class="content">
            <el-col :span="8">
              <div class="text">
                <div class="text_name">
                  <div>低电压</div>
                  <div>0.0%</div>
                </div>
                <div class="text_num">0</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="text">
                <div class="text_name">
                  <div>欠压</div>
                  <div>0.0%</div>
                </div>
                <div class="text_num">0</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--    折线图-->
    <el-row :gutter="20">
      <!--      30天属性告警统计-->
      <el-col :span="8" :xs="24">
        <div class="container">
          <div class="title">30天属性告警统计</div>
          <div id="main" style="width: 100%; height: 250px"></div>
        </div>
      </el-col>
      <!--      30天通道告警统计-->
      <el-col :span="8" :xs="24">
        <div class="container">
          <div class="title">30天通道告警统计</div>
          <div id="mains" style="width: 100%; height: 250px"></div>
        </div>
      </el-col>
    </el-row>
    <!--    地图部分-->
    <el-row style="margin-top: 20px; width: 100%; background: #002127;border-radius: 10px;">
      <!--      告警分布-->
      <el-col :span="24" :xs="24">
        <div class="map_title">告警分布</div>
      </el-col>
      <!--      下拉框-->
      <div style="margin-left: 10px" class="cel">
        <el-select v-model="values" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!--      地图内容-->
      <el-col :span="24" :xs="24">
        <div class="map_content">
          <!--          <input v-model.number="center.lng" placeholder="请选择">-->
          <!--          <input v-model.number="center.lat">-->
          <!--          <input v-model.number="zoom">-->
          <baidu-map
            class="bm-view"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            @ready="createMap"
          >
            <!--            @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom"-->
            <!--              地图类型控件-->
            <bm-map-type
              :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
              anchor="BMAP_ANCHOR_TOP_RIGHT"
            ></bm-map-type>
            <!--            自定义控件-->
            <!--            <bm-control>-->
            <!--              <button @click="addZoom(19)">缩放至最大</button>-->
            <!--              <button @click="addZoom(10)">还原</button>-->
            <!--              <button @click="addZoom(3)">缩放至最小</button>-->
            <!--            </bm-control>-->
            <!--            添加一个自定义图标的点-->
            <bm-marker
              :position="markerPoint"
              :dragging="true"
              animation="BMAP_ANIMATION_BOUNCE"
              :icon="{
                url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif',
                size: { width: 200, height: 100 },
              }"
              @click="infoWindowOpen"
            >
              <bm-info-window
                :show="show"
                @close="infoWindowClose"
                @open="infoWindowOpen"
                >我爱北京天安门</bm-info-window
              >
            </bm-marker>
            <!--            <bm-marker-clusterer>-->
            <!--              <bm-marker :position="{lng: model.lng, lat: model.lat}"/>-->
            <!--            </bm-marker-clusterer>-->
          </baidu-map>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
<script>
import {
  getDeviceWarnCount,
  getSensorWarnCount,
  getMapLineChart,
} from "@/api/dev/index";
export default {
  name: "preview",
  components: {},
  data() {
    return {
      deviceCount: [], //属性统计
      sensorCount: [], //传感器统计
      // 地图初始化坐标和缩放级别
      center: { lng: 0, lat: 0 },
      zoom: 3,
      // 图形标记点坐标
      markerPoint: {
        lng: 116.404,
        lat: 39.915,
      },
      // 地图点标签
      show: false,
      model: {
        lng: "",
        lat: "",
        address: "",
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      values: "",
    };
  },
  props: {},
  watch: {},
  created() {
    this.getDeviceWarnNum();
    this.getSensorWarnNum();
  },
  mounted() {
    this.chartA();
    this.chartB();
  },
  methods: {
    // 设备（属性告警）统计
    getDeviceWarnNum() {
      getDeviceWarnCount()
        .then((res) => {
          console.log(res);
          this.deviceCount = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 传感器统计
    getSensorWarnNum() {
      getSensorWarnCount()
        .then((res) => {
          console.log(res);
          this.sensorCount = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //  30天属性告警统计
    chartA() {
      const myChart = this.$echarts.init(document.getElementById("main")); // 先获得这个dom元素并初始化
      // 指定图表的配置项和数据
      myChart.setOption({
        backgroundColor: "#002127",
        // 指示线
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#006675",
            },
          },
        },
        // 折线颜色
        color: ["#006675"],
        // 图表距离容器距离
        grid: {
          left: "2%",
          right: "2%",
          top: "5%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            show: true,
            type: "category",
            // 隐藏横向网格线
            splitLine: {
              show: false,
            },
            data: [
              "2001/10/01",
              "2002/10/01",
              "2003/10/01",
              "2004/10/01",
              "2005/10/01",
              "2006/10/01",
              "2007/10/01",
              "2008/10/01",
              "2009/10/01",
            ],
            // 横坐标刻度线
            axisTick: {
              show: false,
            },
            // x轴字体设置
            axisLabel: {
              rotate: 0, //倾斜角度
              color: "#ffffff",
            },
            // 坐标轴
            axisLine: {
              lineStyle: {
                color: "#999999",
              },
            },
            // y轴与坐标轴线对齐
            boundaryGap: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#ffffff",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#999999",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "设备数",
            type: "line",
            symbolSize: 4,
            smooth: true,
            data: ["40", "80", "50", "120", "70", "190", "80", "120", "40"],
          },
        ],
      });
      getMapLineChart()
        .then((res) => {
          console.log(res);
          const time = res.data.time;
          const number1 = res.data.value1;
          myChart.setOption({
            backgroundColor: "#002127",
            // 指示线
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#006675",
                },
              },
            },
            // 折线颜色
            color: ["#006675"],
            // 图表距离容器距离
            grid: {
              left: "2%",
              right: "2%",
              top: "5%",
              bottom: "8%",
              containLabel: true,
            },
            xAxis: [
              {
                show: true,
                type: "category",
                // 隐藏横向网格线
                splitLine: {
                  show: false,
                },
                data: time,
                // 横坐标刻度线
                axisTick: {
                  show: false,
                },
                // x轴字体设置
                axisLabel: {
                  rotate: 0, //倾斜角度
                  color: "#ffffff",
                },
                // 坐标轴
                axisLine: {
                  lineStyle: {
                    color: "#999999",
                  },
                },
                // y轴与坐标轴线对齐
                boundaryGap: true,
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  color: "#ffffff",
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#999999",
                    type: "dashed",
                  },
                },
              },
            ],
            series: [
              {
                name: "设备数",
                type: "line",
                symbolSize: 4,
                smooth: true,
                data: number1,
              },
            ],
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //  30天属性告警统计
    chartB() {
      const myChart = this.$echarts.init(document.getElementById("mains")); // 先获得这个dom元素并初始化
      // 指定图表的配置项和数据
      myChart.setOption({
        backgroundColor: "#002127",
        // 指示线
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#006675",
            },
          },
        },
        // 折线颜色
        color: ["#006675"],
        // 图表距离容器距离
        grid: {
          left: "2%",
          right: "2%",
          top: "5%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            show: true,
            type: "category",
            // 隐藏横向网格线
            splitLine: {
              show: false,
            },
            data: [
              "2001/10/01",
              "2002/10/01",
              "2003/10/01",
              "2004/10/01",
              "2005/10/01",
              "2006/10/01",
              "2007/10/01",
              "2008/10/01",
              "2009/10/01",
            ],
            // 横坐标刻度线
            axisTick: {
              show: false,
            },
            // x轴字体设置
            axisLabel: {
              rotate: 0, //倾斜角度
              color: "#ffffff",
            },
            // 坐标轴
            axisLine: {
              lineStyle: {
                color: "#999999",
              },
            },
            // y轴与坐标轴线对齐
            boundaryGap: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#ffffff",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#999999",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "设备数",
            type: "line",
            symbolSize: 4,
            smooth: true,
            data: ["40", "80", "50", "120", "70", "190", "80", "120", "40"],
          },
        ],
      });
      getMapLineChart()
        .then((res) => {
          console.log(res);
          const time = res.data.time;
          const number2 = res.data.value2;
          myChart.setOption({
            backgroundColor: "#002127",
            // 指示线
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#006675",
                },
              },
            },
            // 折线颜色
            color: ["#006675"],
            // 图表距离容器距离
            grid: {
              left: "2%",
              right: "2%",
              top: "5%",
              bottom: "8%",
              containLabel: true,
            },
            xAxis: [
              {
                show: true,
                type: "category",
                // 隐藏横向网格线
                splitLine: {
                  show: false,
                },
                data: time,
                // 横坐标刻度线
                axisTick: {
                  show: false,
                },
                // x轴字体设置
                axisLabel: {
                  rotate: 0, //倾斜角度
                  color: "#ffffff",
                },
                // 坐标轴
                axisLine: {
                  lineStyle: {
                    color: "#999999",
                  },
                },
                // y轴与坐标轴线对齐
                boundaryGap: true,
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  color: "#ffffff",
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#999999",
                    type: "dashed",
                  },
                },
              },
            ],
            series: [
              {
                name: "设备数",
                type: "line",
                symbolSize: 4,
                smooth: true,
                data: number2,
              },
            ],
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //  地图双向绑定
    createMap({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
    },
    // 自定义input框
    // syncCenterAndZoom (e) {
    //   const {lng, lat} = e.target.getCenter()
    //   this.center.lng = lng
    //   this.center.lat = lat
    //   this.zoom = e.target.getZoom()
    // },
    //自定义控件
    // addZoom (level) {
    //   this.zoom = level
    // },
    //  点击 Marker 弹出 InfoWindow
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },
  },
};
</script>
  
<style lang='less' scoped>
.app-container {
  width: 100%;
  min-height: 100%;
//   padding: 15px;
  box-sizing: border-box;
  background: #0c323a;
  .container {
    width: 100%;
    background: #002127;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    .title {
      width: 100%;
      height: 42px;
      line-height: 42px;
      padding: 0 15px;
      border-bottom: 1px solid #999999;
      color: #ffffff;
      font-size: 14px;
    }
    .content {
      width: 100%;
      height: 200px;
      padding: 10px 10px 10px 15px;
      .text {
        background: url(@/assets/image/1.png) no-repeat;
        background-size: 100% 100%;
        padding: 10px 15px;
        margin-bottom: 10px;
        border-radius: 2px;
        color: #ffffff;
        .text_name {
          font-size: 12px;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .text_num {
          font-size: 30px;
          font-style: normal;
          font-weight: 300;
        }
      }
    }
  }
  .map_title {
    width: 100%;
    height: 42px;
    //background: #002127;
    line-height: 42px;
    padding: 0 15px;
    // border-bottom: 1px solid #999999;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .map_content {
    margin-top: 10px;
    width: 100%;
    // padding: 10px;
    //background: #002127;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    .bm-view {
      width: 100%;
      height: 500px;
      // 去除百度地图的图标 根据实际情况看是否要加样式穿透(::v-deep)
      ::v-deep .anchorBL {
        display: none !important;
      }
    }
  }
  .cel {
    ::v-deep .el-input__inner {
      background: #041c21;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(0, 231, 231, 0.502);
      color: white;
    }
  }
}
</style>
  